<template>
  <!-- 容器 -->
  <div class="charts" ref="charts"></div>
</template>
 
<script setup lang="js">
import { ref, onMounted, onUnmounted } from "vue";
const { proxy } = getCurrentInstance();
const echarts = proxy.echarts

const props = defineProps(['dataList'])

const XdataList = ref()
const YdataList = ref()
watch(props, (newProps) => {
  XdataList.value = newProps.dataList.map(item => item.ny);
  YdataList.value= newProps.dataList.map(item => item.countData);
  setData()
}), { immediate: true }


const barCharts = ref()
onMounted(() => {
  // 只要窗口大小发生像素变化就会触发
  window.addEventListener("resize", () => {
    barCharts.value.resize(); // 窗口发生改变就更新echarts
  });
  //初始化echarts实例
  barCharts.value = markRaw(echarts.init(proxy.$refs['charts']));
  //配置数据
  

})
const setData=()=>{
  barCharts.value.setOption({
    xAxis: {
    data:XdataList.value,
      //隐藏x轴
      show: false,
      //均分
      type: "category",
    },
    yAxis: {
      //隐藏y轴
      show: false,
    },
    //系列
    series: [
      {
        //图标形式-柱状图
        type: "bar",
        data: YdataList.value,
        color: 'cyan'
      },
    ],
    //布局调试
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    tooltip: {}
  });
}
onUnmounted(() => {
  // 卸载echarts实例
  barCharts.value.dispose();
  window.removeEventListener("resize", barCharts.value);
});

</script>
 
<style scoped>
.charts
{
  width: 100%;
  height: 100%;
}
</style>